<template>
  <div class="article">
    <div
      class="article-main"
      v-for="a in 5"
      :key="a"
    >
      <div
        class="article-header"
        style="height: 80px;"
      >
        <h1 style="text-align: center">vue router.beforeEach跳转路由验证用户登录状态</h1>
        <h2 style="text-align: center">发表于 2018年07月16日 • 138 次围观 • 活捉 7 条 • 1点赞 • 1收藏</h2>
      </div>
      <div class="article-content">
        <p style="text-indent: 2em;">
          使用vue判断验证用户登录状态
          导航钩子类似于生命周期钩子，包含路由进入前，进入后，更新时，退出前等几个周期，主要用于控制导航的前进后退或跳转等。

          其中router.beforeEach就是路由进入前的周期，同时有路由的来源和去向两个参数，可以判断和控制当前路由的走向和重定向。

          一般router.beforeEach配合vuex全局状态储存使用，验证用户登录状态。也可以结合sessionStorage 和localStorage使用，原理相同
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
.article {
  margin: 40px;
}

.article-main {
  height: 300px;
  background-color: white;
  margin: 10px;
  overflow: hidden;
}

.article div {
  width: 100%;
}

.article-content {
  font-size: 20px;
  padding-left: 70px;
  padding-right: 70px;
}
</style>
